<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style: none
    }
  </style>
</head>

<body>
  <div class='contain'>
    <button id="decrement">-</button>
    <span id="count">0</span>
    <button id="increment">+</button>
  </div>
  <script type="module">
    import {createStore} from '../ass/redux.js';
    // 定义reducer函数 
    // 内部主要的工作是根据不同的action 返回不同的state
    // function counterReducer(state = {
    //   count: 0
    // }, action) {
    //   switch (action.type) {
    //     case 'INCREMENT':
    //       return {
    //         count: state.count + 1
    //       }
    //       case 'DECREMENT':
    //         return {
    //           count: state.count - 1
    //         }
    //         default:
    //           return state
    //   }
    // }
    // 使用reducer函数生成store实例
    // const store = createStore(counterReducer)

    // 订阅数据变化
    // store.subscribe(() => {
    //   console.log(store.getState())
    //   document.getElementById('count').innerText = store.getState().count

    // })
    // 增
    // const inBtn = document.getElementById('increment')
    // inBtn.addEventListener('click', () => {
    //   store.dispatch({
    //     type: 'INCREMENT'
    //   })
    // })
    // 减
    // const dBtn = document.getElementById('decrement')
    // dBtn.addEventListener('click', () => {
    //   store.dispatch({
    //     type: 'DECREMENT'
    //   })
    // })

    // reducer 函数 
    function counterReducer1(state = {}, action) {
      console.log(action)
      if(action.type === 'INCREMENT') {
        return {
          a: 1
        }
      }
      return {
        b: 2
      }
    }

    // 使用createStore 创建一个store对象
    const store = createStore(counterReducer1)

    // 当state中的值发生变化时，执行这里的函数
    store.subscribe((e) => {
      console.log(store.getState())
    })

    setTimeout(() => {
      // 触发reducer函数
      store.dispatch({
        type: 'DECREMENT'
      })
    }, 3000);

  </script>
</body>

</html>